<template>
<!--  <Header></Header>-->
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-main>
      <el-row style="width: 100%">
        <el-col :span="20" :offset="2">
            <el-menu  class="el-menu-msg" mode="horizontal"
            router>
              <el-menu-item index="comment">
                <el-badge :value=commentCount class="item">
                  消息和@
                </el-badge>
              </el-menu-item>
              <el-menu-item index="follows">
                <el-badge :value=followCount class="item">
                  新增粉丝
                </el-badge>
              </el-menu-item>
              <el-menu-item index="3">
                <el-badge  :value=likeCount class="item">
                  赞和收藏
                </el-badge>
              </el-menu-item>
              <el-menu-item index="4">
                <el-badge :value=privateLetterCount class="item">
                  私信
                </el-badge>
              </el-menu-item>
              <el-menu-item index="5">
                <el-badge :value=sysNoticeCount class="item">
                  系统通知
                </el-badge>
              </el-menu-item>
            </el-menu>
        </el-col>
      </el-row>

    </el-main>
  </el-container>


</template>

<script>
import Header from '@/pages/common/header'
import storage from "../../model/storage";


export default {
  components: {
    Header,
  },
  data() {
    return {
      data:'',
      commentCount:'',
      followCount:'',
      likeCount:'',
      privateLetterCount:'',
      sysNoticeCount:'',
    }
  },
  computed: {},
  watch: {},
  methods: {
    /**
     * websocket初始化
     */
    initWebSocket() {
      //连接错误
      this.websocket.onerror = this.setErrorMessage

      // //连接成功
      this.websocket.onopen = this.setOnopenMessage

      //收到消息的回调
      this.websocket.onmessage = this.upMsgCount

      //连接关闭的回调
      this.websocket.onclose = this.setOncloseMessage

      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = this.onbeforeunload
    },
    setErrorMessage() {
      this.data = "WebSocket连接发生错误" + '   状态码：' + this.websocket.readyState;
      console.log(this.data)
    },
    setOnopenMessage() {
      this.data = "WebSocket连接成功" + '   状态码：' + this.websocket.readyState;
      console.log(this.data)
    },
    setOncloseMessage() {
      this.data = "WebSocket连接关闭" + '   状态码：' + this.websocket.readyState;
      console.log(this.data)
    },
    closeWebSocket() {
      this.websocket.close()
    },
    onbeforeunload() {
      this.closeWebSocket();
    },
    getMsgCount(){
      this.$http({
        url: this.$http.adornUrl('/user/message/count'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.commentCount = data.count.commentCount
          this.followCount = data.count.followCount
          this.likeCount = data.count.likeCount
          this.privateLetterCount = data.count.privateLetterCount
          this.sysNoticeCount = data.count.sysNoticeCount
        } else {
         alert("该函数错误--请检查")
        }
      })
    },
    /**
     * 实时更新数量
     * @param event
     */
    upMsgCount(event){
      let parse = JSON.parse(event.data);
      console.log(parse.commentCount)
      this.commentCount = parse.commentCount;
      this.followCount = parse.followCount
      this.likeCount = parse.likeCount
      this.privateLetterCount = parse.privateLetterCount
      this.sysNoticeCount = parse.sysNoticeCount
    },

    /**
     * 更新评论信息
     */
  },
  beforeCreate() {
  },

  created() {
  },

  beforeMount() {

  },

  mounted() {
    if ('WebSocket' in window) {
      let token = storage.get('token');
      this.websocket = new WebSocket('ws://localhost:40000/websocket/'+token)
      this.initWebSocket()
    } else {
      alert('当前浏览器 Not support websocket')
    }

    this.getMsgCount();
  },

  beforeUpdate() {

  },

  updated() {
    // this.closeWebSocket()
  },

  beforeDestroy() {
    // this.onbeforeunload()
  },
  destroyed() {
    this.closeWebSocket()
  },

  activated() {
  }
}
</script>

<style scoped>
.el-menu-msg{
  background-color:#E9EEF3;
  active-text-color:#E9EEF3;
}
.el-menu-item{
  font-size: 18px;
}
.el-menu-item.is-active {
  background-color: #E9EEF3 !important;
  color: #fff;
  font-weight: 600;
  span {
    color: #fff !important;
  }
}
.el-table-column{
  background-color: #E9EEF3;
}
.el-table__empty-block{
  //background-image: url("");
  background-repeat: no-repeat;
  background-color: #E9EEF3;
  background-position: center;
  background-size: 75px;
  margin-top: 25px;
  margin-bottom: 60px;
  span{
    position: relative;
    top: 50px;
  }
}



</style>

